<template>
  <div>
    <ul>
      <li>全选<input type="checkbox" v-model="flag" @click="chooseAll(!flag)"/></li>
      <li>#</li>
      <li>商品名字</li>
      <li>商品图片</li>
      <li>商品价格</li>
      <li>商品数量</li>
      <li>操作</li>
    </ul>
    
      <cartItem  v-for="(item, index) in listItem" :key="index" :item='item' class="cartItem" :cc = 'index' />
    
  </div>
</template>

<script>
import cartItem from "./cartListitem.vue";
export default {
  components: {
    cartItem,
  },
  props:['listItem'],
  data() {
    return {
        flag:false
    };
  },
  methods:{
    chooseAll(flag){
        this.flag = !this.flag
        this.$emit('chooseAll',flag)
    }
  },
  watch:{
    listItem:{
        handler(val){
            if(val.filter(item=>item.isFlag==true).length==val.length){
                this.flag = true
            }else{
                this.flag = false
            }
        },
        deep:true,
        immediate:true
    }
  }
};
</script>

<style scope>
* {
  margin: 0;
  padding: 0;
}
ul {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
ul li {
  flex: 1;
  border: 2px solid;
  text-align: center;
}
.cartItem{
 width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
</style>